<template>
  <div ref="simulatorMainRef" class="simulator_main" :style="'--color:' + ztColor + ';--color2:' + color2">
    <div class="location zjtd" :style="{ background: navBj }">
      <div class="flex">
        <img :src="miniConfig.path + '/home_ic_location.png'" mode="widthFix" class="locationImg">
        <span class="locationName">{{ venueInfo.name ? venueInfo.name : '请选择场馆' }}</span>
        <img :src="miniConfig.path + '/home_ar_next.png'" mode="widthFix" class="locationIcon">
      </div>
    </div>
    <div class="contents" :style="{ background: 'linear-gradient(180deg,' + themeHead + ' 0%, #F7F7F7 100%)' }">
      <div style="height: 188px;" />
      <template v-for="em in moduleList">
        <!-- banner -->
        <div
          v-if="em.code == 'M_BANNER' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_BANNER_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <el-carousel height="300px" arrow="never">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img style="width: 100%;height: 100%;" :src="item.icon || item.imageFullPath" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 通知 -->
        <div
          v-if="em.code == 'M_NOTICE' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_NOTICE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="gxnotice">
            <img :src="miniConfig.path + '/home_ic_notice.png'" mode="widthFix">
            <div class="notion_xian" />
            <div class="notion_cnt" />
          </div>
        </div>
        <!-- 教练风采 -->
        <div
          v-if="em.code == 'M_TEACHER' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_TEACHER_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div v-if="em.name" class="uniDbt">
            <div class="left">
              {{ em.name }}
            </div>
          </div>
          <TeacherList :config="teacherConfig" />
        </div>
        <!-- 功能入口 -->
        <div
          v-if="em.code == 'M_FUNCTION' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_FUNCTION_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div v-if="em.name" class="uniDbt">
            <div class="left">
              {{ em.name }}
            </div>
          </div>
          <div class="service_box mb2">
            <div
              v-for="item in modulesConfig.venueContent.customList.filter(i => i.isSelect == '1')"
              :key="item.id"
              class="service_box_item"
              :class="'w' + modulesConfig.content.rowNum"
            >
              <div class="service_box_item_icon">
                <img :src="item.icon">
              </div>
              <span class="service_box_item_span">{{ item.title }}</span>
            </div>
          </div>
        </div>
        <!-- 热门项目  M_PROJECT -->
        <div
          v-if="em.code == 'M_PROJECT' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_PROJECT_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb2"
        >
          <div v-if="em.name" class="uniDbt">
            <div class="left">
              {{ em.name }}
            </div>
          </div>
          <div class="hdList">
            <template v-for="(item, index) in hotItemConfig.venueContent.customList">
              <div
                v-if="item.bean && item.bean.bgPic"
                :key="index"
                class="hdli"
                :class="hotItemConfig.content.param.indexOf('3') > -1 ? 'w' + hotItemConfig.content.rowNum : 'wu w' + hotItemConfig.content.rowNum"
                :style="{ backgroundImage: 'url(' + item.bean.bgPic + ')' }"
              >
                <div v-if="hotItemConfig.content.param.indexOf('2') > -1" class="kuan">
                  <img :src="item.icon || item.showProjectPictures">
                </div>
                <div v-if="hotItemConfig.content.param.indexOf('1') > -1" class="hdWz limit-1-line">
                  {{ item.title || item.projectName }}
                </div>
              </div>
              <div
                v-else
                :key="index"
                class="hdli"
                :class="hotItemConfig.content.param.indexOf('3') > -1 ? 'w' + hotItemConfig.content.rowNum : 'wu w' + hotItemConfig.content.rowNum"
                :style="{ backgroundImage: 'url(' + item.showBgPic + ')' }"
              >
                <div v-if="hotItemConfig.content.param.indexOf('2') > -1" class="kuan">
                  <img :src="item.icon || item.showProjectPictures">
                </div>
                <div v-if="hotItemConfig.content.param.indexOf('1') > -1" class="hdWz limit-1-line">
                  {{ item.title || item.projectName }}
                </div>
              </div>
            </template>

          </div>
        </div>
        <!-- 订场购票 -->
        <div
          v-if="em.content.isDisplay == '1' && em.isDeleted == '0' && em.code == 'M_SITE'"
          ref="M_SITE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3 site_wrap"
        >
          <ShortcutTab :venue-info="venueInfo" :glabo-config="miniConfig" :venue-config="venueConfig" />
        </div>
        <!-- 课程 -->
        <div
          v-if="em.code == 'M_COURSE' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_COURSE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>查看更多<i class="el-icon-arrow-right" /></span>
          </div>
          <KcList :config="hotCourseConfig" />
        </div>
        <!-- 套餐 -->
        <div
          v-if="venueConfig && em.code == 'M_MEALS' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_MEALS_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3 site_wrap"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>查看更多<i class="el-icon-arrow-right" /></span>
          </div>
          <TcList :config="hotMealConfig" />
        </div>
        <!-- 运动 -->
        <div
          v-if="venueConfig && em.code == 'M_KNOWLEDGE' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_KNOWLEDGE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>查看更多<i class="el-icon-arrow-right" /></span>
          </div>
          <YdList :config="sportsConfig" />
        </div>
        <!-- 活动 -->
        <div
          v-if="venueConfig && em.code == 'M_ACTIVITY' && em.content.isDisplay == '1' && em.isDeleted == '0'"
          ref="M_ACTIVITY_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>查看更多<i class="el-icon-arrow-right" /></span>
          </div>
          <HdList :config="activityConfig" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import ShortcutTab from './show/shortcutTab.vue'
import KcList from './show/kcList.vue'
import HdList from './show/hdList.vue'
import YdList from './show/ydList.vue'
import TcList from './show/tcList.vue'
import TeacherList from './show/teacher.vue'

import { getMiniBanners, getProjectList, getHotCourseList, getMiniMeal, getSportList, getNearActivity, getTeacherAllList } from '@/api'
export default {
  components: {
    ShortcutTab,
    HdList,
    YdList,
    TcList,
    KcList,
    TeacherList
  },
  props: {
    config: {
      type: Array,
      default: () => []
    },
    venueInfo: {
      type: Object,
      default: () => ({})
    },
    glaboConfig: {
      type: Object,
      default: () => ({})
    },
    activeItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeItemTemp: {},
      ztColor: '#435ebe',
      color2: '#4167C1',
      navBj: '',
      themeHead: '#fff',
      venueName: '',
      hotItems: [{
        rowNum: 2,
        paramShow: []
      }, {
        rowNum: 2,
        paramShow: []
      }],
      moduleList: [],

      bannerList: [],
      bannerListTemp: [],
      modulesConfig: {
        venueContent: {
          customList: []
        }
      },
      venueConfig: {},

      hotItemConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      hotItemsTemp: [],

      hotCourseConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      teacherConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      CourseTemp: [],

      hotMealConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      mealTemp: [],

      sportsConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      sportTemp: [],
      activityConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      activityTemp: []

    }
  },
  computed: {
    xqBox() {
      return this.$refs.simulatorMainRef
    }
  },
  watch: {
    config: {
      handler: function(newValue) {
        this.moduleList = [...this.config]
      },
      immediate: true,
      deep: true
    },
    glaboConfig: {
      handler: function(newValue) {
        this.miniConfig = newValue
        this.ztColor = newValue.color1
        this.color2 = newValue.color2
        // this.themeHead = newValue.color2
      },
      immediate: true,
      deep: true
    },
    activeItem: {
      handler: function(newValue) {
        this.activeItemTemp = newValue
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.xqBox.addEventListener('scroll', this.handleScroll)
    })
    this.$bus.$on('simulatorScoll', (val) => {
      if (val.content.isDisplay === '0' || val.isDeleted === '1') return
      val = val.code + '_Ref'
      this.$nextTick(function() {
        const scrollElem = this.$refs.simulatorMainRef // 对应ref的命名
        const scrollElem2 = this.$refs[val][0] // 对应ref的命名
        // console.log(val, scrollElem2)
        if (scrollElem && scrollElem.scrollTo) {
          scrollElem.scrollTo({ top: scrollElem2.offsetTop - 180, behavior: 'smooth' })
        }
        // scrollElem.scrollTo({ top: scrollElem2.offsetTop - 180, behavior: 'smooth' })
      })
    })
    this.$bus.$on('miniBannerChange', (val, list, showContent) => {
      if (val === '2') {
        this.bannerList = list || []
      } else {
        this.bannerList = [...this.bannerListTemp]
      }
      if (showContent.indexOf('1') > -1) {
        this.themeHead = this.glaboConfig.color2
      } else {
        this.themeHead = '#fff'
      }
    })
    this.$bus.$on('miniHotItemsChange', (val, config) => {
      if (val === '2') {
        this.hotItemConfig = config || {}
      } else {
        this.hotItemConfig = config
        this.hotItemConfig.venueContent.customList = [...this.hotItemsTemp]
      }
    })
    this.$bus.$on('miniHotCourseChange', (val, config) => {
      if (val === '2') {
        this.hotCourseConfig = config || {}
      } else {
        this.hotCourseConfig = config
        this.hotCourseConfig.venueContent.customList = [...this.CourseTemp]
      }
    })
    this.$bus.$on('miniHotMealChange', (val, config) => {
      if (val === '2') {
        this.hotMealConfig = config || {}
      } else {
        this.hotMealConfig = config
        this.hotMealConfig.venueContent.customList = [...this.mealTemp]
      }
    })
    this.$bus.$on('miniTeacherChange', (val, config) => {
      if (val === '2') {
        this.teacherConfig = config || {}
      } else {
        this.teacherConfig = config
        this.teacherConfig.venueContent.customList = [...this.teacherTemp]
      }
    })
    this.$bus.$on('miniSportChange', (val, config) => {
      if (val === '2') {
        this.sportsConfig = config || {}
      } else {
        this.sportsConfig = config
        this.sportsConfig.venueContent.customList = [...this.sportTemp]
      }
    })
    this.$bus.$on('miniActiveChange', (val, config) => {
      if (val === '2') {
        this.activityConfig = config || {}
      } else {
        this.activityConfig = config
        this.activityConfig.venueContent.customList = [...this.activityTemp]
      }
    })
    this.$bus.$on('miniModulesChange', (val, list) => {
      this.modulesConfig.content.rowNum = val
      this.modulesConfig.venueContent.customList = [...list]
    })
    this.$bus.$on('miniVenuebookChange', (val) => {
      this.venueConfig = { ...val }
    })
  },
  created() {
    this.initHomePage()
  },
  methods: {
    async initHomePage() {
      try {
        const resultAll = await Promise.all([
          getMiniBanners({ param: { isRec: '1', venueId: this.venueInfo.id }, pagination: { page: 1, rows: 5 }}),
          getProjectList({ param: { isRec: '1', status: '1', venueId: this.venueInfo.id, channel: '01' }, pagination: { page: 1, rows: 9 }}),
          getHotCourseList({ param: { isRec: '1', venueId: this.venueInfo.id, channel: '01' }, pagination: { page: 1, rows: 6 }}),
          getMiniMeal({ param: { status: '1', venueId: this.venueInfo.id, channel: '01' }, pagination: { page: 1, rows: 6 }}),
          getSportList({ param: { isRec: '1', venueId: this.venueInfo.id, channel: '01' }, pagination: { page: 1, rows: 6 }}),
          getNearActivity({ param: { isRec: '1', venueId: this.venueInfo.id, channel: '01' }, pagination: { page: 1, rows: 6 }}),
          getTeacherAllList({ param: { status: '1', isiOnJob: '1', venueId: this.venueInfo.id }, pagination: { page: 1, rows: 10 }})
        ])
        this.bannerListTemp = resultAll[0].record || []
        this.hotItemsTemp = [...resultAll[1].recordList] || []
        this.CourseTemp = [...resultAll[2].recordList] || []
        this.mealTemp = [...resultAll[3].recordList] || []
        this.sportTemp = [...resultAll[4].recordList] || []
        this.activityTemp = [...resultAll[5].recordList] || []
        this.teacherTemp = [...resultAll[6].recordList] || []
      } catch (error) {
        console.log(error)
      }
      this.moduleList.forEach(item => {
        switch (item.code) {
          case 'M_BANNER':
            if (item.venueContent.customList && item.venueContent.customList.length > 0) {
              this.bannerList = [...item.venueContent.customList]
            } else {
              this.bannerList = [...this.bannerListTemp]
            }
            if (item.content.param.indexOf('1') > -1) {
              this.themeHead = this.glaboConfig.color2
            } else {
              this.themeHead = '#fff'
            }
            break
          case 'M_FUNCTION':
            this.modulesConfig = { ...item }
            break
          case 'M_SITE':
            this.venueConfig = { ...item.content }
            break
          case 'M_MEALS':
            if (item.venueContent.customList && item.venueContent.customList.length > 0) { } else {
              item.venueContent.customList = this.mealTemp
            }
            this.hotMealConfig = { ...item }
            break
          case 'M_COURSE':
            if (item.venueContent.customList && item.venueContent.customList.length > 0) {   } else {
              item.venueContent.customList = this.CourseTemp
            }
            this.hotCourseConfig = { ...item }
            break
          case 'M_ACTIVITY':
            if (item.venueContent.customList && item.venueContent.customList.length > 0) { } else {
              item.venueContent.customList = this.activityTemp
            }
            this.activityConfig = { ...item }
            break
          case 'M_KNOWLEDGE':
            if (item.venueContent.customList && item.venueContent.customList.length > 0) { } else {
              item.venueContent.customList = this.sportTemp
            }
            this.sportsConfig = { ...item }
            break
          case 'M_PROJECT':
            if (item.venueContent.customList && item.venueContent.customList.length > 0) { } else {
              item.venueContent.customList = this.hotItemsTemp
            }
            this.hotItemConfig = { ...item }
            break
          case 'M_TEACHER':
            if (item.venueContent.customList && item.venueContent.customList.length > 0) { } else {
              item.venueContent.customList = this.teacherTemp
            }
            this.teacherConfig = { ...item }
            break
          default:
            break
        }
      })
    },
    returnTop() {
      console.log(68)
      this.$nextTick(function() {
        const scrollElem = this.$refs.main // 对应ref的命名
        const woGn = this.$refs.woGn
        scrollElem.scrollTo({ top: woGn.scrollHeight, behavior: 'smooth' })
      })
    },
    handleScroll() {
      // 获取dom滚动距离
      const scrollTop = this.xqBox.scrollTop
      // 获取可视区高度
      // const offsetHeight = this.xqBox.offsetHeight
      // // 获取滚动条总高度
      // const scrollHeight = this.xqBox.scrollHeight
      // // xqConList 为目录内容列表
      let topOpacity = scrollTop / 100 - 0.4
      if (scrollTop < 40) {
        topOpacity = 0
      } else if (topOpacity >= 1) {
        topOpacity = 1
      }
      this.navBj = `rgba(255,255,255,${topOpacity})`
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.w69 {
  // width: 690px;
  margin-left: auto;
  margin-right: auto;
}

.wCard {
  width: 100%;
  padding: 0 30px;
  font-size: 28px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.border {
  border: 4px solid $primaryColor;
}

.flex {
  display: flex;
  align-items: center;
}

.simulator_main {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 108px;

  &::-webkit-scrollbar {
    display: none;
  }
}

.contents {
  height: 500px;
  position: relative;
  .site_wrap{
    background-color: #fff;
    width: 690px;
    margin: 30px 30px;
  }
}

.location {
  z-index: 999;

  &.zjtd {
    height: 160px;
    padding: 0 30px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    padding-top: 88px;
    left: 0;
    width: 100%;
  }

  .locationImg {
    width: 36px;
    height: 36px;
  }

  .locationName {
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: Medium;
    margin: 0 20px;
    color: #111111;
  }

  .locationIcon {
    width: 22px;
    height: 22px;
  }

  &.zts {
    .locationName {
      color: #333;
    }
  }
}

.gxnotice {
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 14px 30px;
  box-sizing: border-box;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  align-content: center;

  img {
    width: 38px;
    height: 38px;
    flex: none;
  }

  .notion_xian {
    width: 1px;
    height: 30px;
    background: #D9D9D9;
    margin: 0 20px;
    flex: none;
    overflow: hidden;
  }

  .notion_cnt {
    flex: 1;
    height: 42px;
    line-height: 42px;

    .notion_cnt_p {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      overflow: hidden;
      line-height: 42px;
      padding: 0;
      margin: 0;
    }
  }

}

.service_box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  box-sizing: border-box;

  .service_box_item {
    width: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;

    &.w2 {
      width: 50%;
    }

    &.w3 {
      width: 33.33%;
    }

    &.w4 {
      width: 25%;
    }

    &.w5 {
      width: 20%;
    }

    .service_box_item_icon {
      width: 88px;
      height: 88px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .service_box_item_span {
      color: #7F7F7F;
      font-size: 25px;
      margin-top: 10px;
    }
  }
}

.hdList {
  display: flex;
  flex-wrap: wrap;
  width: 690px;

  .hdli {
			border-radius: 8px;
			margin-right: 15px;
			background-color: #fff;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			background-position: center center;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			margin-right: 20px;
      .hdWz {
				font-size: 30px;
				color: #222222;
        line-height: 1;
        margin-top: 46px;
			}

			&.w2 {
				width: 335px;
				height: 384px;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.kuan {
					width: 146px;
					height: 146px;
				}
			}

			&.w3 {
				width: 220px;
				height: 252px;
				margin-right: 15px;

				&:nth-child(3n) {
					margin-right: 0;
				}
				.kuan {
					width: 96px;
					height: 96px;
				}
			}

			&.w4 {
				width: 157.5px;
				height: 180px;
				&:nth-child(4n) {
					margin-right: 0;
				}
				.kuan {
					width: 68px;
					height: 68px;
				}
        .hdWz {
					margin-top: 35px;
				}
			}

			&.wu {
				background: #fff !important;
			}

			.kuan {
				display: block;
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 100%;
					height: 100%;
				}
			}
			&.on {
				.kuan {
					border: none;
					background-color: $Color;
				}

				.hdWz {
					color: $Color;
				}
			}
		}

}</style>
